<html>

<head>
	<title>Raspberry Pi Car with Video Live Streaming</title>
	<link rel="stylesheet" href='/static/css/style.css' />
	<script src="/static/js/jquery.min.js" type="text/javascript"></script>
	<script>
		function stepper_motor_action(action) {
			$.ajax({
				type: 'GET',
				url: '/stepper_motor_action',
				dataType: 'json',
				data: { 'action': action },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}
	  function car_action(action) {
			$.ajax({
				type: 'GET',
				url: '/car_action',
				dataType: 'json',
				data: { 'action': action },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}
		function car_speed(speed) {
			$.ajax({
				type: 'GET',
				url: '/speed',
				dataType: 'json',
				data: { 'speed': speed },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}
		function car_turn_speed(speed) {
			$.ajax({
				type: 'GET',
				url: '/turn_speed',
				dataType: 'json',
				data: { 'turn_speed': speed },
				success: function (res) {
					console.log(res)
				},
				error: function () {
					consle.log('error')
				}
			})
		}
		const source = new EventSource("/data");
		source.onmessage = function (event) {
			const data = JSON.parse(event.data);
			console.log(data)
			$('#cur_distance').text(data.value.toFixed(2));
		}
	</script>
</head>

<body>
	<h1>Raspberry Pi Car with Video Live Streaming</h1>
	<hr />
	<h2>Raspberry Pi Car</h2>
	<hr />
	<!-- 
    GO = 0
    BACK = 1
    STOP = 2
    LEFT = 3
    RIGHT = 4
    -->
	<div class="btn_container">
		<button class="btn_circle"  onclick="car_action(0)">前进</button>
	</div>
	<div class="btn_container">
		<button class="btn_circle" onclick="car_action(3)">左转</button>
		<button class="btn_circle" onclick="car_action(2)">停止</button>
		<button class="btn_circle" onclick="car_action(4)">右转</button>
	</div>
	<div class="btn_container">
		<button class="btn_circle"  onclick="car_action(1)">后退</button>
	</div>
	<div class="btn_container">
		<button onclick="car_speed(100)">快(100%)</button>
		<button onclick="car_speed(75)">稍快(75%)</button>
		<button onclick="car_speed(50)">中(50%)</button>
		<button onclick="car_speed(25)">慢(25%)</button>
	</div>
	<div class="btn_container">
		<button onclick="car_turn_speed(100)">快转向(100%)</button>
		<button onclick="car_turn_speed(75)">稍快转(75%)</button>
		<button onclick="car_turn_speed(50)">中转向(50%)</button>
		<button onclick="car_turn_speed(25)">慢转向(25%)</button>
	</div>
	<hr />
	<div class="data_container">
	<h3>Distance(cm): <text id="cur_distance" style="color:blue;">{{cur_distance}}</text></h3>
	</div>
	<!-- 
    LEFT = 1
    RIGHT = 2
    -->
	<h2>Turning Camera</h2>
	<div class="btn_container">
		<button class="btn_circle" onclick="stepper_motor_action(1)">左转</button>
		<button class="btn_circle" onclick="stepper_motor_action(2)">右转</button>
	</div>
	<h2>Video Live Streaming</h2>
	<hr />
	<div class="video_container" id="car_video">
		<img src="{{ url_for('video_feed') }}" width="100%">
	</div>
</body>

</html>